<template>
    <div class="tv-wrapper">
        <div class="video-wrap">
            <div class="video" id="channel"></div>
        </div>
        <div class="detail">
            <div class="title">{{currChannel.label}}</div>
        </div>
        <div class="lst">
            <header>
                <span>جەمئىي 8 قانال</span>
                <span>قاناللار</span>
            </header>
            <div class="cnl">
                <div class="channel" @click="changeChannel(index)" :class="activeChannel==index?'active':'inactive'" v-for="(item, index) in list" :key="index">
                    <span>{{item.label}}</span>
                </div>
            </div>
        </div>
        <!-- 推荐电影 -->
        <div class="recommend">
            <span class="bar"></span>
            <span class="txt">تەۋسىيە</span>
        </div>
        <div class="recommend-wrap">
            <waterfall :col="3" :data="recommendList">
                <template>
                    <VideoCover v-for="(item, index) in recommendList" :key="index" :info="item" />
                </template>
            </waterfall>
        </div>
    </div>
</template>

<script>
import { shareFrend, shareMoments } from "@/utils";
import VideoCover from "@/components/VideoCover.vue";
export default {
    components: {
        VideoCover
    },
    data() {
        return {
            list: [
                {
                    label: "شىنجاڭ xjtv1 سۈنئىي ھەمرا قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb01.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv2 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb02.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv3 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb03.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv4 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb04.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv5 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb05.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv9 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb09.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv10 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb10.m3u8"
                },
                {
                    label: "شىنجاڭ xjtv12 تېلىۋېزىيە قانىلى",
                    url: "http://livehyw2.sobeycache.com/xjtvs/zb12.m3u8"
                },
                {
                    label: "CCTV-1 ئۇنىۋېرسال قانىلى",
                    url: "http://ivi.bupt.edu.cn/hls/cctv1.m3u8"
                },
                {
                    label: "CCTV-5 تەنتەربىيە قانىلى",
                    url: "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8"
                },
                {
                    label: "CCTV-6 كىنو قانىلى",
                    url: "http://ivi.bupt.edu.cn/hls/cctv6.m3u8"
                },
                {
                    label: "CCTV-13 خەۋەر قانىلى",
                    url: "http://ivi.bupt.edu.cn/hls/cctv13.m3u8"
                }
            ],
            currChannel: {},
            activeChannel: 0,
            recommendList: [],
            player: null
        };
    },
    mounted() {
        this.initInfo();
        this.getRecommedList();
        shareFrend(this);
        shareMoments(this);
    },
    methods: {
        initInfo() {
            this.currChannel = this.list[0];
            this.initPlayer();
            /* wx.ready(function() {
                //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: "分享标题", // 分享标题
                    desc: "分享描述", // 分享描述
                    link: "http://mars-kino.oss-cn-beijing.aliyuncs.com/MarsVideo/20191207123252222", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "http://mars-kino.oss-cn-beijing.aliyuncs.com/MarsVideo/20191207123252222", // 分享图标
                    success: function() {
                        // 设置成功
                    }
                });
            }); */
        },
        changeChannel(index) {
            this.player.destroy();
            this.activeChannel = index;
            this.currChannel = this.list[index];
            this.initPlayer()
            this.getRecommedList();
        },
        getRecommedList() {
            this.$http
                .post("/getVideo", {
                    from: "recommend",
                    sort: "MOVIE"
                })
                .then(res => {
                    let list = res.list;
                    this.recommendList = list;
                });
        },
        initPlayer() {
            let self = this;
            this.$nextTick(() => {
                let el = document.querySelector("#channel");
                this.player = new Player({
                    el,
                    autoPlay: true,
                    url: self.currChannel.url,
                    width: el.parentElement.style.width,
                    height: el.parentElement.style.height
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.tv-wrapper {
    padding-bottom: 80px;
    .video-wrap {
        width: 100vw;
        height: 400px;
    }
    .detail {
        height: 120px;
        border-bottom: 1px solid #dfdfdf;
        text-align: right;
        direction: rtl;
        .title {
            padding: 15px 24px;
            font-size: 28px;
            color: #f50;
        }
    }
    .lst {
        padding: 20px;
        header {
            padding: 10px;
            font-size: 26px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .cnl {
            flex-wrap: wrap;
            display: flex;
            justify-content: space-around;
            .channel {
                width: 46%;
                border-radius: 10px;
                height: 60px;
                border: 1px solid transparent;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 15px;
                font-size: 24px;
                direction: rtl;
            }
            .active {
                background-color: #ffffff;
                border-color: #f50;
                color: #f50;
            }
            .inactive {
                border-color: transparent;
                background-color: #eeeeee;
                color: #7a7777;
            }
        }
    }
    .recommend {
        height: 50px;
        width: 98%;
        margin: 0 auto;
        box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        text-align: left;
        margin-bottom: 10px;
        .bar {
            height: 36px;
            display: inline-block;
            width: 10px;
            background-color: #f40;
            margin-top: 8px;
            margin-left: 10px;
            border-radius: 5px;
            margin-right: 15px;
        }
        .txt {
            font-size: 30px;
            color: #f40;
            vertical-align: middle;
            display: inline-block;
            margin-bottom: 17px;
        }
    }
    .recommend-wrap {
        // width: 100%;
        box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        padding: 0 1vw;
    }
}
</style>